<template>
  <div style="display: flex">
    <el-select  v-model="form.province" style="flex: 1;" placeholder="请选择省份" size="small"
                @change="getCityData" minlength=1 prop="provinceCode">
      <el-option
        v-for="item in addressArray"
        :key="item.areacode"
        :label="item.areaname"
        :value="item.areaname"
      >
      </el-option>
    </el-select>
    <el-select  v-model="form.city" style="flex: 1;margin-left: 10px" placeholder="请选择市区" size="small"
                @change="getAreaData" minlength=1 prop="cityCode">
      <el-option
        v-for="item in cityArray"
        :key="item.areacode"
        :label="item.areaname"
        :value="item.areaname">
      </el-option>
    </el-select>
    <el-select  v-model="form.area" style="flex: 1;margin-left: 10px" placeholder="请选择县" size="small"
                @change="onAreaChanged" minlength=1 prop="areaCode">
      <el-option
        v-for="item in areaArray"
        :key="item.areacode"
        :label="item.areaname"
        :value="item.areaname">
      </el-option>
    </el-select>
  </div>
</template>

<script>
    import axios from 'axios'
    // 使用说明：v-model时，必须传带有带有省，市，区拼音的字段

    export default {
        name: "li_area_select",
        //通过 model 选项配置子组件接收的 prop 名以及派发的事件名
        model: {
            prop: 'form',
            event: 'change',
        },
        props: {
            form: {
                type: Object,
            },
        },
        data() {
            return {
                areaJson: '../static/json/address.json',
                addressArray: [],//所有数据
                cityArray: [],
                areaArray: [],
            }
        },
        created() {
            this.getAddressData();
        },
        methods: {
            getAddressData() {
                var that = this
                axios.get(that.areaJson).then(function (response) {
                    if (response.status === 200) {
                        //获取地址
                        that.addressArray = response.data.data;
                        //默认值赋值获取城市数组
                        if(that.form.province){
                            for (let ad of that.addressArray) {
                                if (ad.areaname === that.form.province) {
                                    // console.log("ad--" + ad)
                                    that.cityArray = ad.subarea;
                                    that.form.pcode = ad.areaCode;
                                    //---
                                    //默认赋值获取区域数组
                                    if(that.form.city){
                                        for (let a of that.cityArray) {
                                            if (a.areaname === that.form.city) {
                                                that.areaArray = a.subarea;
                                                break;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                })
            },
            //选择省份
            getCityData(val) {
                // console.log("AAA",this.form);
                //清空市，和区
                this.form.city='';
                this.form.ccode='';
                this.form.area='';
                this.form.acode='';
                this.$emit('change', this.form);//发送改变
                for (let ad of this.addressArray) {
                    if (ad.areaname === val) {
                        this.form.pcode=ad.areacode;
                        this.cityArray = ad.subarea;
                        return
                    }
                }
            },
            getAreaData(val) {
                // console.log("BBB",this.form);
                //清空区
                this.form.area='';
                this.form.acode='';
                this.$emit('change', this.form);//发送改变
                for (let ad of this.cityArray) {
                    if (ad.areaname === val) {
                        this.form.ccode=ad.areacode;
                        this.areaArray = ad.subarea;
                        return
                    }
                }
            },
            //地区数据变动后
            onAreaChanged(val) {
                // console.log("CCC",this.form);
                this.$emit('change', this.form);//发送改变
                for (let ad of this.areaArray) {
                    if (ad.areaname === val) {
                        this.form.acode=ad.areacode;
                        return
                    }
                }
            }
        }
    }
</script>

<style scoped>

</style>
